<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Signup Page</title>
    <link href="../css/common.css" rel="stylesheet" type="text/css"/>
    <style>
        h1 {
            text-align: center;
        }

        #signup_form_container {
            margin: 0 auto;
            width: 350px;
            text-align: center;
            font-size: 22px;
        }

    </style>
</head>
<body>

<div id="container">
    <?php readfile("../htmls/header.html") ?>
    <div id="body">

        <section>
            <fieldset id="signup_form_container">
                <legend>Sign up</legend>
                <form id='signup_form' action="signup.php" method='post'>
                    email: <input name='email' type='email' required="required"
                                  pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"/>
                    <br>
                    <br>
                    username:<input name="username" id="input_username" type="text" required="required" pattern="^[\w&\- ]+$">
                    <br>
                    <br>
                    password: <input name='password' id="input_password" type='password' required="required"
                                     pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"/><br>
                    <br>
                    <br>

                    <input name="signup_token" type="hidden" value="<?php echo $_SESSION['signup_token'] ?>"/>

                    <input class="button" type='submit' value="submit">
                </form>
            </fieldset>
        </section>
    </div>
    <?php readfile("../htmls/footer.html") ?>
</div>

<script type="text/javascript">
    document.getElementById("input_username").oninput = function () {
        this.setCustomValidity("");
    }

    document.getElementById("input_username").oninvalid = function () {
        this.setCustomValidity('Username should only contain Alphabet Number _ - &');
    };

    document.getElementById("input_password").oninput = function () {
        this.setCustomValidity("");
    }

    document.getElementById("input_password").oninvalid = function () {
        this.setCustomValidity('Password should contain minimum 8 characters at least 1 Alphabet and 1 Number');
    };

    var signupForm = document.getElementById('signup_form');
    // Do this only if the HTML5 Form Validation is absent
    if (!signupForm.checkValidity || signupForm.noValidate)
    // to listen on the submit event of "signupForm"
        signupForm.onsubmit = function () {
            // a private function for displayError
            function displayErr(el, msg) {
                alert('FieldError: ' + msg);
                el.focus();
                return false
            }

            // looping over the array of elements contained in the form
            for (var i = 0, p, el, els = this.elements; el = els[i]; i++) {
                // validate empty field if required attribute is present
                if (el.hasAttribute('required') && el.value == '')
                    return displayErr(el, el.title + ' is required');
                // validate pattern if pattern attribute is present
                if ((p = el.getAttribute('pattern')) && el.hasAttribute('required') && !new RegExp(p).test(el.value))
                    return displayErr(el, 'in' + el.title);
            }
            // If false is returned above, the form submission will be canceled;
            // If false is NOT returned, the form will submit accordingly
        }
</script>
<script type="text/javascript" src="../javascripts/returnhome.js"></script>
</body>
</html>

